<template>
	<view class="Mall4j container">
		<scroll-view scroll-x class="category-tit" :scroll-into-view="intoView" :scroll-with-animation="true">
			<block v-for="(item, index) in subCategoryList" :key="index">
			<view
          :id="'sw' + item.categoryId"
          :class="'category-item' + (item.categoryId === categoryId ? ' on' : '')" :data-id="item.categoryId"
					@click="onSubCategoryTap">
        {{item.categoryName}}
      </view>
      </block>
		</scroll-view>

		<view class="prod-item">

			  <block v-if="prodList.length">
			        <block
			          v-for="(prod, key) in prodList"
			          :key="key"
			        >
			          <view
                    class="prod-items"
                    :data-productId="prod.productId"
                    @click="toProdPage" >
			            <view class="hot-imagecont">
			              <image
			                :src="prod.pic"
			                class="hotsaleimg"
			              />
			            </view>
			            <view class="hot-text">
			              <view class="hotprod-text">
			                {{ prod.prodName }}
			              </view>
			              <view class="prod-info">
			                {{ prod.brief }}
			              </view>
			              <view class="prod-text-info">
			                <view class="price">
			                  <text class="symbol">
			                    ￥{{prod.currentPrice}}
			                  </text>
			                </view>
			              </view>
			            </view>
			          </view>
			        </block>
			      </block>
			<view v-else class="empty-wrap">
				暂无商品数据~
			</view>

		</view>
	</view>
</template>
<script>
import {categoryList} from "@/api/category";
import {productList} from "@/api/product";
	export default {
		data() {
			return {
				parentId: '',
				categoryId: null,
				current: 1,
				pages: 1,
				intoView: '',
				subCategoryList: [],
				prodList: [],
				isLoaded: true,
        price: "",
			}
		},
		//生命周期函数--监听页面加载
		onLoad(options) {
			this.parentId = options.parentId
			this.categoryId = options.categoryId
			this.getSubCategory()
			this.getProdList()
		},

		//页面上拉触底事件的处理函数
		onReachBottom() {
			if (this.current < this.pages) {
				this.current++
				this.getProdList()
			}
		},
		methods: {
			//获取顶栏子分类数据
		async	getSubCategory() {
      let data =await categoryList(this.parentId)
      this.subCategoryList = data.data
      console.info(this.subCategoryList)
      this.intoView = 'sw' + this.categoryId
			},
			//根据分类id获取商品列表数据
			async getProdList() {
				this.isLoaded = false
       let data = await productList(this.categoryId)
        console.info(data)
        this.isLoaded = true
        this.prodList = data.rows
        this.current = data.rows.current
        this.price = data.rows.currentPrice
        this.pages = data.rows.pages
			},
			//切换顶部分类
			onSubCategoryTap(e) {
				this.categoryId = e.currentTarget.dataset.id
				this.current = 1
				this.pages = 0
				this.intoView = 'sw' + e.currentTarget.dataset.id
				this.getProdList()
			},
			//跳转商品下详情
			toProdPage(e) {
        const prodId = this.prodList.find(p => p.key === e.currentTarget.dataset.key).productId
        console.info(prodId)
        if (prodId) {
					uni.navigateTo({
						url: '/pages/index/prod?productId=' + prodId
					})
				}
			}
		},
	}
</script>

<style lang="scss">
	.container {
		background: #f4f4f4;
	}

	.category-tit {
		width: 100%;
		white-space: nowrap;
		position: fixed;
		top: 0px;
		z-index: 999;
		background-color: #fff;
		border-bottom: 2rpx solid #f4f4f4;
		font-size: 30rpx;

		.category-item {
			display: inline-block;
			padding: 20rpx 10rpx;
			margin: 0 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}
	}

	.prod-item {
		height: calc(100vh - 100rpx);
	}

	.on {
		border-bottom: 4rpx solid #e43130;
		color: #e43130;
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.empty {
		margin-top: 200rpx;
	}

	.prod-items {
		width: 345rpx;
		display: inline-block;
		background: #fff;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2);

		&:nth-child(2n-1) {
			margin: 20rpx 10rpx 10rpx 20rpx;
		}

		&:nth-child(2n) {
			margin: 20rpx 20rpx 10rpx 10rpx;
		}

		.hot-imagecont {
			.hotsaleimg {
				width: 341rpx;
				height: 341rpx;
			}

			font-size: 0;
			text-align: center;
		}

		.hot-text {
			.hotprod-text {
				font-size: 28rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			margin-top: 20rpx;
			padding: 0 10rpx;

			.prod-info {
				font-size: 22rpx;
				color: #999;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.prod-text-info {
				position: relative;
				height: 70rpx;
				line-height: 70rpx;
				font-family: Arial;

				.hotprod-price {
					display: inline;
					font-size: 26rpx;
					color: #eb2444;
				}

				.basket-img {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
					right: 0;
					bottom: 7rpx;
					padding: 8rpx;
				}
			}
		}
	}

	.more-prod {
		.prod-text-right {
			.prod-info {
				font-size: 22rpx;
				color: #999;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.empty-wrap {
		color: #aaa;
		text-align: center;
		padding-top: 400rpx;
	}
</style>